<template>
  <a-modal
    title="分类管理"
    :visible="visible"
    width="480px"
    @ok="handleOk"
    @cancel="handleCancel"
    :afterClose="afterClose"
  >
    <a-form-model ref="form" :model="form" v-bind="layout" :rules="rules">
      <a-form-model-item label="分类名称" prop="name">
        <a-input v-model="form.name" placeholder="请输入分类名称"></a-input>
      </a-form-model-item>
      <a-form-model-item label="保存位置" prop="pid">
        <a-tree-select
          v-model="form.pid"
          placeholder="请选择保存位置"
          style="width: 100%"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          :tree-data="treeSelect.treeData"
          :replaceFields="treeSelect.replaceFields"
          @select="onTreeSelect"
        >
        </a-tree-select>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { addDashboardCategory, upDashboardCategory, getDashboardCategoryTree } from "@/api/multidimensionalAnalysis"

const layout = {
  labelCol: {
    span: 5
  },
  wrapperCol: {
    span: 19
  }
}
export default {
  data() {
    return {
      layout,
      visible: false,
      form: {
        name: "",
        pid: ""
      },
      treeSelect: {
        treeData: [],
        replaceFields: {children:"children", title:"name", key:"id", value: "id" }
      },
      rules: {
        name: { required: true, message: "分类名称不得为空" },
        // pid: { required: true, message: '保存位置不得为空' }
      }
    }
  },
  methods: {
    handleOk() {
      this.$refs.form.validate()
      .then(() => {
        this.saveCategory(this.form)
      })
    },
    handleCancel() {
      this.visible = false
    },
    afterClose() {
      this.form = {}
      this.treeSelect.treeData = []
    },
    onTreeSelect(value, node, extra) {
      this.form.parentPath = node.dataRef.parentPath.join(",")
    },
    show(data) {
      Object.assign(this.form, data)
      this.visible = true
      this.getDashboardCategoryTree()
    },
    saveCategory(params) {
      let promise
      if (params.pid === undefined) {
        params.pid = 0
        params.parentPath = ""
      }
      if (params.id !== undefined) {
        promise = upDashboardCategory(params)
      } else {
        promise = addDashboardCategory(params)
      }
      promise
      .then(res => {
        if (res.errorCode === 0) {
          this.handleCancel()
          this.$emit("ok")
        } else {
          this.$message.error(res.msg)
        }
      })
      .catch(err => {
        this.$message.error(err)
      })
    },
    getDashboardCategoryTree() {
      const iteration = (arr, path = []) => arr.map(val => {
          val.parentPath = path
          if (val.children) {
            iteration(val.children, [...path, val.id])
          }
          return val
        })
      getDashboardCategoryTree()
      .then(res => {
        if (res.errorCode === 0) {
          this.treeSelect.treeData = iteration(res.data)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>
.category-item{
  display: flex;
  align-items: center;
  .category-icon{
    margin-top: 1px;
    margin-right: 10px;
  }
  .category-name{
    display: inline-block;
    width: calc(100% - 120px);
  }
  .category-edit{
    cursor: pointer;
    padding: 6px 10px;
    // margin-right: auto;
  }
  .category-del{
    cursor: pointer;
    padding: 6px 10px;
  }
}

.category-add{
  cursor: pointer;
  height: 33px;
  display: flex;
  align-items: center;
  margin-top: 10px;
  .icon{
    color: #409EFF;
    margin-right: 6px;
  }
}
/deep/ .ant-col{
  padding: 0!important;
  margin: 0!important;
}
</style>
